import * as echarts from '../../ec-canvas/echarts';
var appData = {
  data: [],
  menzhenData:[],
}
Page({
  
  data: {
    ecScatter: {
      onInit: function (canvas, width, height, dpr) {
        const scatterChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(scatterChart);
        scatterChart.setOption(getScatterOption());

        return scatterChart;
      }
    },
    ecBar: {
      onInit: function (canvas, width, height, dpr) {
        const barChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(barChart);
        barChart.setOption(getBarOption());

        return barChart;
      }
    },

    
  },
  onLoad() {
    appData.data = [100, 200, 300, 400, 500, 600, 700]
    appData.menzhenData = [80, 180, 280, 380, 480, 580, 680]
  },
  onReady() {
  }
});


function getBarOption() {
  return {
    title: {
      text: '七日内门诊量住院量',
      left: 'center',
      top: 10,
      textStyle: {
        color: '#ccc'
      }
    },
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '门诊量',
        type: 'bar',
        barWidth: '40%',
        data: appData.data
      },
      {
        name: '住院量',
        type: 'bar',
        barWidth: '40%',
        data: appData.menzhenData,
        itemStyle: {
          normal: {
            color: '#a8bcd4'
          }
        },
      }
    ]
  };
}

function getScatterOption() {

  return {
    backgroundColor: '#2c343c',

    title: {
      text: '门诊住院占比',
      left: 'center',
      top: 10,
      textStyle: {
        color: '#ccc'
      }
    },

    tooltip: {
      trigger: 'item',
      formatter: '{a} \n{b} : {c} ({d}%)'
    },

    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    series: [{
      name: '门住比',
      type: 'pie',
      radius: '65%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: '门诊' },
        { value: 310, name: '住院' },

      ].sort(function (a, b) { return a.value - b.value; }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },

      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }]
  };
  
}
